<template>
  <!-- ---------------------------奖学金------------------------------------- -->
  <div class="bonus">
    <div class="descriptions__title">奖学金</div>
    <el-row class="count-row" :gutter="12">
      <el-col :span="12">
        <el-card shadow="hover">
          <el-icon size="60px">
            <Memo />
          </el-icon>
          <span>获奖学金</span>
          <span class="count">{{ awardNote?.num }}</span>
          <span>（次）</span>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <el-icon size="60px">
            <Memo />
          </el-icon>
          <span>累计获奖学金</span>
          <span class="count">{{ awardNote?.sum }}</span>
          <span>（元）</span>
        </el-card>
      </el-col>
    </el-row>

    <!-- //奖学金具体类别 -->
    <div class="lineBlock"></div>
    <el-row class="name-row" :gutter="12">
      <el-col v-for="(item, i) in award" :key="i" :span="8">
        <el-card shadow="hover">
          <div class="up">
            <div class="left">
              <div>{{ item.awardName }}</div>
              <div>
                金额：
                <span class="amount">{{ item?.awardAmount }}</span>
                元
              </div>
            </div>
            <img src="../../assets/jf.jpg" class="img" />
          </div>
          <div class="down">{{ item.unit + '奖学金' }}</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
  <div class="award">
    <div class="descriptions__title">竞赛获奖</div>
    <el-row class="count-row" :gutter="12">
      <el-col :span="12">
        <el-card shadow="hover">
          <img src="../../assets/R-C.jpg" class="img" />
          <span>获奖次数（次）</span>
          <span class="count">{{ raceNote?.num }}</span>
        </el-card>
      </el-col>
    </el-row>
    <div class="lineBlock"></div>
    <el-row class="name-row" :gutter="12">
      <el-col v-for="(item, i) in awardList" :key="i" :span="8">
        <el-card shadow="hover">
          <div class="up">
            <div class="left">
              <span class="left-name">{{ item?.awardName }}</span>
              <!-- <div>金额：<span class="amount">{{ item.amount }}</span> 元</div> -->
            </div>
            <div class="right">{{ item.acquireTime }}</div>
          </div>
          <div class="down">
            <span>{{ item.unit }}</span>
            <!-- <span>{{ item.school }}</span> -->
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>

  <!-- ------------------------------------------助学金------------------------------ -->
  <div class="bursary">
    <div class="descriptions__title">助学金</div>
    <el-row class="count-row" :gutter="12">
      <el-col v-for="(item, i) in bursaryList" :key="i" :span="12">
        <el-card shadow="hover">
          <img src="../../assets/m.png" class="img" />
          <span>{{ item.name }}</span>
          <span class="count">{{ item.count }}</span>
        </el-card>
      </el-col>
    </el-row>
    <div class="lineBlock"></div>
    <el-table :data="stipends" border stripe style="width: 100%">
      <el-table-column prop="awardName" label="助学金名称" />
      <el-table-column prop="acquireTime" label="获得时间" />
      <el-table-column prop="unit" label="等级" />
      <el-table-column prop="awardAmount" label="金额" />
    </el-table>
    <el-pagination small layout="prev, pager, next" :total="jtotal" :page-size="5"
      @current-change="changeSize($event, 'j')"></el-pagination>
  </div>

  <!-- --------------------------------------------助学&&贷款---------------------------------------------------------- -->
  <div class="studentLoan">
    <div class="descriptions__title">助学贷</div>
    <el-row class="count-row" :gutter="12">
      <el-col v-for="(item, i) in studentLoanList" :key="i" :span="8">
        <el-card shadow="hover">
          <img src="../../assets/for.png" class="img" />
          <div class="loan-item">
            <span>{{ item.name }}</span>
            <span class="count">{{ item.count }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div class="lineBlock"></div>
    <el-table :data="loan" border stripe style="width: 100%">
      <el-table-column prop="acquireTime" label="贷款发放日期" />
      <el-table-column prop="mount" label="金额" />
    </el-table>
    <el-pagination small layout="prev, pager, next" :total="total" :page-size="5"
      @current-change="changeSize($event, 'd')"></el-pagination>
  </div>

  <!--  ------------------------------------------------------勤工助学 ---------------------------------------------------------->
  <div class="workStudy">
    <div class="descriptions__title">勤工助学</div>
    <el-row class="count-row" :gutter="12">
      <el-col :span="12">
        <el-card shadow="hover">
          <img src="../../assets/home.png" class="img" />
          <span>参加岗位</span>
          <span class="count">{{ workStudyInfo?.num }}（次）</span>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <img src="../../assets/home.png" class="img" />
          <span>累计工时</span>
          <span class="count">{{ workStudyInfo?.totalHours }}（小时）</span>
        </el-card>
      </el-col>
    </el-row>
    <el-row justify="center">
      <el-col :span="16">
        <el-card shadow="hover">
          <div style="text-align: center; font-weight: bold">展示工时</div>
          <div id="myChart"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
  <!-- -----------------------惩处信息------------------------------------ -->
  <div class="punishment">
    <div class="descriptions__title">惩处信息</div>
    <el-row class="count-row" :gutter="12">
      <el-col v-for="(item, i) in punishmentList" :key="i" :span="6">
        <el-card shadow="hover">
          <div class="punishment-item">
            <span>{{ item.type }}</span>
            <span>
              <span :style="{ color: item.color }" class="count">
                {{ item.count }}</span>次
            </span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div class="lineBlock"></div>
    <el-table :data="punishment" border stripe style="width: 100%">
      <el-table-column prop="punishTime" label="惩处时间" />
      <el-table-column prop="punishType" label="类型" />
      <el-table-column prop="reason" label="原因" />
    </el-table>
    <el-pagination small layout="prev, pager, next" :total="ftotal" :page-size="5"
      @current-change="changeSize($event, 'f')"></el-pagination>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { Memo } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
import {
  getAwardInfo,
  getStudentInfo,
  getWorkStudy,
  getLoanInfo,
  getPunishmentInfo,
} from '@/api/student'
import { onMounted, ref, nextTick } from 'vue'
// 画图表
function drawChart() {
  const chartContainer = document.getElementById('myChart')
  const chart = echarts.init(chartContainer)
  chart.setOption({
    title: {
      test: 'test',
    },
    xAxis: {
      type: 'category',
      data: [
        '一月',
        '二月',
        '三月',
        '四月',
        '五月',
        '六月',
        '七月',
        '八月',
        '九月',
        '十月',
        '十一月',
        '十二月',
      ],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: workStudyInfo.value.stat,
        type: 'bar',
      },
    ],
  })
}
const route = useRoute()
const info = ref({
  pageNum: 1,
  pageSize: 5,
  type: 0,
})
getStudentInfo(route.params.id).then((res) => {
  const result = res.data.data
  info.value.classNum = result.classNum
  info.value.major = result.major
  info.value.stuName = result.stuName
  info.value.stuId = result.stuId
  awardInfo()
  workStudy()
  loanInfo()
  punishmentInfo()
  raceAward()
  stipend()
})

//奖学金获奖助学金
const awardNote = ref({
  num: 0,
  sum: 0,
})
const award = ref([])
function awardInfo() {
  getAwardInfo({ ...info.value }).then((res) => {
    const data = res.data.data
    awardNote.value = data.note
    award.value = data.data
  })
}

const race = ref([])
const raceNote = ref({})
function raceAward() {
  info.value.type = 1
  info.value.pageSize = 5
  getAwardInfo({ ...info.value }).then((res) => {
    info.value.pageSize = 5
    info.value.type = 0
    const data = res.data.data
    raceNote.value = data.note
    awardList.value = data.data
    console.log('===>', data)
  })
}

// 《=================================助学金==================================》
const stipends = ref([])
const jtotal = ref()
function stipend() {
  info.value.type = 2
  getAwardInfo({ ...info.value }).then((res) => {
    info.value.type = 0
    const data = res.data.data
    bursaryList.value[0].count = data.note.num
    bursaryList.value[1].count = data.note.sum
    stipends.value = data.data
    jtotal.value = data.total
    console.log('===>', data)
  })
}
// 《=================================勤工助学==================================》
const workStudyInfo = ref({})
function workStudy() {
  getWorkStudy(route.params.id).then((res) => {
    const data = res.data.data
    workStudyInfo.value = data
    drawChart()
  })
}
// 《=================================贷款==================================》
const loan = ref([])
const total = ref()
function loanInfo() {
  getLoanInfo({ ...info.value }).then((res) => {
    const data = res.data.data
    studentLoanList.value[0].count = data.note.loan
    studentLoanList.value[1].count = data.note.loan
    studentLoanList.value[2].count = data.note.retuened
    loan.value = data.data
    total.value = data.total
  })
}
// 《=================================惩处信息==================================》
const punishment = ref([])
const ftotal = ref()
function punishmentInfo() {
  getPunishmentInfo({ ...info.value }).then((res) => {
    const data = res.data.data
    punishment.value = data.data
    punishmentList.value[0].count = data.note.warn
    punishmentList.value[1].count = data.note.demerit
    punishmentList.value[2].count = data.note.serious_warning
    punishmentList.value[3].count = data.note.detention
    ftotal.value = data.total
  })
}
function changeSize(val, type) {
  info.value.pageNum = val
  if (type === 'd') {
    loanInfo()
  }
  if (type === 'f') {
    punishmentInfo()
  }
  if (type === 'j') {
    stipend()
  }
}
const bonusList = ref([
  {
    name: '2020国际级一等奖学金',
    amount: 6000,
    date: '2020-04-01',
    type: '国家奖学金',
  },
  {
    name: '2020国际级一等奖学金',
    amount: 6000,
    date: '2020-04-01',
    type: '国家奖学金',
  },
  {
    name: '2020国际级一等奖学金',
    amount: 6000,
    date: '2020-04-01',
    type: '国家奖学金',
  },
  {
    name: '2020国际级一等奖学金',
    amount: 6000,
    date: '2020-04-01',
    type: '国家奖学金',
  },
  {
    name: '2020国际级一等奖学金',
    amount: 6000,
    date: '2020-04-01',
    type: '国家奖学金',
  },
  {
    name: '2020国际级一等奖学金',
    amount: 6000,
    date: '2020-04-01',
    type: '国家奖学金',
  },
])

const awardList = ref([
  {
    awardName: 'c语言编程竞赛',
    acquireTime: '2023-04-11',
    unit: '国家奖学金',
    school: '北京交通大学',
  },
  {
    awardName: 'c语言编程竞赛',
    acquireTime: '2023-04-11',
    unit: '国家奖学金',
    school: '北京交通大学',
  },
  {
    awardName: 'c语言编程竞赛',
    acquireTime: '2023-04-11',
    unit: '国家奖学金',
    school: '北京交通大学',
  },
])

const bursaryList = ref([
  { name: '获助学金(次)', count: 5 },
  { name: '累计助学金(元)', count: 27000 },
])

const tableData = ref([
  { date: '2016-05-03', name: 'Tom', degree: 'first', money: '100万' },
  { date: '2016-06-03', name: 'Tom', degree: 'first', money: '100万' },
  { date: '2016-07-03', name: 'Tom', adegree: 'first', money: '100万' },
  { date: '2016-08-03', name: 'Tom', adegree: 'first', money: '100万' },
])

const studentLoanList = ref([
  { name: '贷款金额(次)', count: 42000 },
  { name: '已发放金额(元)', count: 34000 },
  { name: '已还金额(元)', count: 5000 },
])

const studentLoanData = ref([
  { date: '2016-05-03', name: 'Tom' },
  { date: '2016-05-03', name: 'Tom' },
  { date: '2016-05-03', name: 'Tom' },
])

const punishmentList = ref([
  { type: '警告', count: 2, color: '#E5AF73' },
  { type: '记过', count: 2, color: '#94B27E' },
  { type: '严重警告', count: 2, color: '#B790D2' },
  { type: '留校察看', count: 2, color: '#5F9ACC' },
])

const punishmentData = ref([
  { date: '2016-05-03', type: '警告', reason: '不知道为啥' },
  { date: '2016-05-03', type: '记过', reason: '不知道为啥' },
  { date: '2016-05-03', type: '留校察看', reason: '不知道为啥' },
])
</script>
<style lang="scss" scoped>
.bonus,
.award,
.bursary {
  .count-row {
    .el-card {
      :deep(.el-card__body) {
        display: flex;
        align-items: center;

        .count {
          font-weight: 700;
          font-size: 28px;
          margin-left: 20px;
        }
      }
    }
  }

  .name-row {
    .el-col {
      margin-bottom: 12px;
    }

    .el-card {
      :deep(.el-card__body) {
        .up {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-bottom: 20px;

          .left {
            .amount {
              color: #999;
            }
          }
        }

        .down {
          font-size: 16px;
          font-weight: 500;
          display: flex;
          align-items: center;
          justify-content: space-between;
          text-align: center;
          margin: 0 -20px;
          padding: 20px 20px 0;
          border-top: 1px solid #e4e7ed;
        }
      }
    }
  }
}

// .bonus {
// }

.award {
  .count-row {
    .el-card {
      background: #f7fbfe;
    }
  }

  .name-row {
    :deep(.el-card__body) {
      .up {
        .left {
          &-name {
            position: relative;

            &:after {
              content: '';
              position: absolute;
              bottom: -10px;
              left: 0;
              right: 0;
              height: 2px;
              background-color: #80a2c6;
            }
          }
        }

        .right {
          background-color: #5a9fe9;
          padding: 5px;
          border-radius: 5px;
        }
      }
    }
  }
}

#myChart {
  margin: 0 auto;
  height: 390px;
}

.studentLoan {
  .count-row {
    :deep(.el-card__body) {
      display: flex;
      align-items: center;

      .loan-item {
        margin-left: 10px;
        display: flex;
        flex-direction: column;

        .count {
          font-weight: 700;
          font-size: 28px;
        }
      }
    }
  }
}

.punishment {
  .el-card {
    :deep(.el-card__body) {
      .punishment-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .count {
          font-weight: 700;
          font-size: 20px;
          margin-right: 5px;
        }
      }
    }
  }
}

.img {
  width: 50px;
  height: 50px;
}
</style>
